// 淡入淡出
.fadeInOut-enter{
  position: absolute;
  opacity: 0.01;
}
.fadeInOut-enter-active{
  position: absolute;
  opacity: 1;
  transition: opacity 500ms ease-in 500ms;
}
.fadeInOut-exit{
  position: absolute;
  opacity: 1;
}
.fadeInOut-exit-active{
  position: absolute;
  opacity: 0.01;
  transition: opacity 500ms ease-in;
}
// 平移-向左
.translationtoLeft-enter{
  position: absolute;
  transform: translateX(100%);
}
.translationtoLeft-enter-active{
  position: absolute;
  transform: translateX(0);
  transition: transform 1000ms ease-in;
}
.translationtoLeft-exit{
  position: absolute;
  transform: translateX(0);
}
.translationtoLeft-exit-active{
  position: absolute;
  transform: translateX(-100%);
  transition: transform 1000ms ease-in;
}
// 平移-向右
.translationtoRight-enter{
  position: absolute;
  transform: translateX(-100%);
}
.translationtoRight-enter-active{
  position: absolute;
  transform: translateX(0);
  transition: transform 1000ms ease-in;
}
.translationtoRight-exit{
  position: absolute;
  transform: translateX(0);
}
.translationtoRight-exit-active{
  position: absolute;
  transform: translateX(100%);
  transition: transform 1000ms ease-in;
}
// 平移-向上
.translationtoTop-enter{
  position: absolute;
  transform: translateY(100%);
}
.translationtoTop-enter-active{
  position: absolute;
  transform: translateY(0);
  transition: transform 1000ms ease-in;
}
.translationtoTop-exit{
  position: absolute;
  transform: translateY(0);
}
.translationtoTop-exit-active{
  position: absolute;
  transform: translateY(-100%);
  transition: transform 1000ms ease-in;
}
// 平移-向下
.translationtoDown-enter{
  position: absolute;
  transform: translateY(-100%);
}
.translationtoDown-enter-active{
  position: absolute;
  transform: translateY(0);
  transition: transform 1000ms ease-in;
}
.translationtoDown-exit{
  position: absolute;
  transform: translateY(0);
}
.translationtoDown-exit-active{
  position: absolute;
  transform: translateY(100%);
  transition: transform 1000ms ease-in;
}
// 层叠-向上
.stacktoTop-enter{
  position: absolute;
  transform: translateY(100%);
  z-index: 1;
}
.stacktoTop-enter-active{
  position: absolute;
  transform: translateY(0);
  transition: transform 1000ms ease-in;
  z-index: 1;
}
.stacktoTop-exit{
  position: absolute;
  transform: translateY(0);
}
.stacktoTop-exit-active{
  position: absolute;
  transform: translateY(0);
  transition: transform 1000ms ease-in;
}
// 层叠-向下
.stacktoBottom-enter{
  position: absolute;
  transform: translateY(-100%);
  z-index: 1;
}
.stacktoDown-enter-active{
  position: absolute;
  transform: translateY(0);
  transition: transform 1000ms ease-in;
  z-index: 1;
}
.stacktoDown-exit{
  position: absolute;
  transform: translateY(0);
}
.stacktoDown-exit-active{
  position: absolute;
  transform: translateY(0);
  transition: transform 1000ms ease-in;
}
// 层叠-向左
.stacktoLeft-enter{
  position: absolute;
  transform: translateX(100%);
  z-index: 1;
}
.stacktoLeft-enter-active{
  position: absolute;
  transform: translateX(0);
  transition: transform 1000ms ease-in;
  z-index: 1;
}
.stacktoLeft-exit{
  position: absolute;
  transform: translateX(0);
}
.stacktoLeft-exit-active{
  position: absolute;
  transform: translateX(0);
  transition: transform 1000ms ease-in;
}
// 层叠-向右
.stacktoRight-enter{
  position: absolute;
  transform: translateX(-100%);
  z-index: 1;
}
.stacktoRight-enter-active{
  position: absolute;
  transform: translateX(0);
  transition: transform 1000ms ease-in;
  z-index: 1;
}
.stacktoRight-exit{
  position: absolute;
  transform: translateX(0);
}
.stacktoRight-exit-active{
  position: absolute;
  transform: translateX(0);
  transition: transform 1000ms ease-in;
}
// 翻转-向上
.overturntoTop-enter{
  position: absolute;
  transform: rotateX(90deg);
  z-index: 0;
}
.overturntoTop-enter-active{
  position: absolute;
  transform: rotateX(0deg);
  transition: transform 500ms ease-in 500ms;
  z-index: 1;
}
.overturntoTop-exit{
  position: absolute;
  transform: rotateX(0);
  z-index: 1;
}
.overturntoTop-exit-active{
  position: absolute;
  transform: rotateX(-90deg);
  transition: transform 500ms ease-in;
  z-index: 0;
}
// 翻转-向下
.overturntoBottom-enter{
  position: absolute;
  transform: rotateX(-90deg);
  z-index: 0;
}
.overturntoBottom-enter-active{
  position: absolute;
  transform: rotateX(0deg);
  transition: transform 500ms ease-in 500ms;
  z-index: 1;
}
.overturntoBottom-exit{
  position: absolute;
  transform: rotateX(0);
  z-index: 1;
}
.overturntoBottom-exit-active{
  position: absolute;
  transform: rotateX(90deg);
  transition: transform 500ms ease-in;
  z-index: 0;
}
// 翻转-向左
.overturntoLeft-enter{
  position: absolute;
  transform: rotateY(90deg);
  z-index: 0;
}
.overturntoLeft-enter-active{
  position: absolute;
  transform: rotateY(0deg);
  transition: transform 500ms ease-in 500ms;
  z-index: 1;
}
.overturntoLeft-exit{
  position: absolute;
  transform: rotateY(0);
  z-index: 1;
}
.overturntoLeft-exit-active{
  position: absolute;
  transform: rotateY(-90deg);
  transition: transform 500ms ease-in;
  z-index: 0;
}
// 翻转-向右
.overturntoRight-enter{
  position: absolute;
  transform: rotateY(-90deg);
  z-index: 0;
}
.overturntoRight-enter-active{
  position: absolute;
  transform: rotateY(0deg);
  transition: transform 500ms ease-in 500ms;
  z-index: 1;
}
.overturntoRight-exit{
  position: absolute;
  transform: rotateY(0);
  z-index: 1;
}
.overturntoRight-exit-active{
  position: absolute;
  transform: rotateY(90deg);
  transition: transform 500ms ease-in;
  z-index: 0;
}